import QtQuick

Item {
    width: 200
    height: 200

    Rectangle {
        id: container
        width: animation.width; height: animation.height + 20  // 增加高度容纳文本
        anchors.centerIn: parent  // 居中显示

        // 将frames属性提升到共同父组件
        property int frames: animation.frameCount

        AnimatedImage {
            id: animation
            source: "qrc:/images/image1.gif"  // 指向images目录下的资源
        }

        // 进度指示条
        Rectangle {
            width: 4; height: 8
            x: (animation.width - width) * animation.currentFrame / container.frames  // 改为访问父组件的frames
            y: animation.height
            color: "red"
        }

        // 当前帧文本提示（已修复frames引用）
        Text {
            text: "当前帧: " + animation.currentFrame + "/" + container.frames  // 改为访问父组件的frames
            y: animation.height + 10  // 位于进度条下方
            anchors.horizontalCenter: parent.horizontalCenter
            font.pixelSize: 12
        }
    }
}
